<template>
  <div class="password-container">
    <PageHeader title="修改密码" />

    <div class="password-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="passwordForm.oldPassword"
            type="password"
            name="oldPassword"
            label="原密码"
            placeholder="请输入原密码"
            :rules="[{ required: true, message: '请输入原密码' }]"
          />
          <van-field
            v-model="passwordForm.newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[
              { required: true, message: '请输入新密码' },
              { pattern: /^.{6,}$/, message: '密码长度至少6位' }
            ]"
          />
          <van-field
            v-model="passwordForm.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入新密码"
            :rules="[
              { required: true, message: '请确认新密码' },
              { validator: validateConfirmPassword, message: '两次密码输入不一致' }
            ]"
          />
        </van-cell-group>
        <div class="form-tips">
          <p>密码需至少6个字符</p>
        </div>
        <div class="form-actions">
          <van-button round block type="primary" native-type="submit" :loading="submitting">确认修改</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant'
import { changePassword } from '@/api/user'
import { useUserStore } from '@/stores/user'
import PageHeader from '@/components/PageHeader.vue'

const router = useRouter()
const userStore = useUserStore()
const submitting = ref(false)

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 验证确认密码
const validateConfirmPassword = (val: string) => {
  return val === passwordForm.newPassword
}

// 提交表单
const onSubmit = async () => {
  submitting.value = true

  try {
    const res = await changePassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword,
      confirmPassword: passwordForm.confirmPassword,
    })

    if (res.code === 200) {
      showSuccessToast('密码修改成功，请重新登录')
      // 退出登录并跳转到登录页
      userStore.logout()
      setTimeout(() => {
        router.replace('/login')
      }, 1500)
    } else {
      showFailToast(res.message || '修改失败，请检查原密码是否正确')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    showFailToast('修改失败，请稍后再试')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
.password-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 50px;
}

.password-form {
  margin-top: $padding-md;
}

.form-tips {
  padding: $padding-md $padding-md 0;
  color: $text-color-light;
  font-size: $font-size-sm;
}

.form-actions {
  margin: $padding-lg $padding-md;
}
</style> 